<template>
  <div>
    <!-- npm install v-lazy-image -->

    <p>打开 `Devtools Network` 选项卡，检查 `Img` 过滤器看是否有效。</p>
    <p>然后，在我们示例中向下滚动直到显示图片时，你会看到图片在进入视口时被加载。</p>
    <div class="bigspace"></div>
    <!-- <v-lazy-image src="https://h.r.sn.cn/aHxHyx" /> -->

    <!-- 另外，通过 src-placeholder，我们还可以使用渐进式增强。
     首先，加载微小的低分辨率图片，然后我们在它被加载后切换到全分辨率图片。 -->

     <!-- <v-lazy-image
      src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
      src-placeholder="https://cdn-images-1.medium.com/max/30/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    /> -->

    <!-- 参考链接：https://mp.weixin.qq.com/s/hFAC5ekmoLYc5jTWdLwlxQ -->
     <!-- 需在微信内置浏览器中打开 -->
  </div>
</template>
<script setup lang='ts'>
import { ref,reactive} from 'vue'
// import VLazyImage from "v-lazy-image"
</script>
<style scoped lang='scss'>
.v-lazy-image {
  width: 100%;
}
.bigspace {
  width: 1px;
  height: 2000px;
}
</style>